<template>
  <view class="moreGameType">
    <nav-back :title="navTitle">
    </nav-back>
    <view class="container">
      <view class="matchInfo">
        <view class="flex flex-direction-row align-center justify-between">
          <view class="flex align-center justify-start flex-direction-row">
            <view class="gameLogo"><image class="gameLogoImage" :src="match.gameIcon"></image></view>
            <text class="matchName">{{ match.matchName }}</text>
          </view>
          <view class="matchDate">
            <text class="matchDateText">{{ match.beginTime | dateFormat("MM月DD日") }}</text>
          </view>
        </view>
        <view class="body flex justify-between align-center flex-direction-row">
          <view class="teamLogo"><image class="teamLogoImage" :src="match.teamAIcon"></image></view>
          <view class="teamInfo flex justify-around align-center">
            <text class="teamName">{{ match.teamAName }}</text>
            <text class="matchTime">{{ match.beginTime | dateFormat("HH:mm") }}</text>
            <text class="teamName">{{ match.teamBName }}</text>
          </view>
          <view class="teamLogo"><image class="teamLogoImage" :src="match.teamBIcon"></image></view>
        </view>
        <!-- 人气 -->
        <popularity :circle="true" :width="600" :height="15"
        :teamAPeoples="support ? support.teamAPeoples : 0"
        :teamBPeoples="support ? support.teamAPeoples : 0"></popularity>
        <score :width="600" :teamAScore="support ? support.teamASupport : 0" 
        :teamBScore="support ? support.teamBSupport : 0"></score>

      </view>
      <scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
        <view
          class="cu-item"
          :class="index == current ? 'text-blue cur' : ''"
          v-for="(item, index) in odds"
          :key="index"
          @click="tabSelect"
          :data-index="index"
          v-text="item.title"
        ></view>
      </scroll-view>
      <swiper class="swiper" :current="current" @change="onChangeSwiper">
        <swiper-item v-for="(item1, index1) in odds" :key="index1">
          <scroll-view scroll-y class="scrollView">
            <view class="type-card" v-for="(item2, index2) in item1.items" :key="index2">
              <view class="type-card-title" v-text="item2.title"></view>
              <view class="type-card-body">
                <view class="grid col-2">
                  <!-- closed:1 结束 stop:2操盘停止1开发 pause:2操盘暂停1开始-->
                  <view
                    class="grid-item"
                    :class="{
                      stop: item3.closed || item3.stop === 2 || item3.pause === 2 || item3.frozen === 2
                    }"
                    v-for="(item3, index3) in item2.items"
                    :key="index3"
                  >
                    <view class="btn" v-if="item3.closed || item3.stop === 2 || item3.pause === 2 || item3.frozen === 2">
                      <view class="name" v-text="item3.name"></view>
                      <view class="tip">瓜分{{ calcScore(item2, index3) | float2int }}万积分</view>
                    </view>

                    <view class="btn" v-else @tap="onTapCheer(index2, index3)">
                      <view class="name" v-text="item3.name"></view>
                      <view class="tip">瓜分{{ calcScore(item2, index3) | float2int }}万积分</view>
                    </view>
                    <!-- 封停 暂停 结束 -->
                    <image
                      class="lockImage"
                      :src="IMAGES.VIDEO_LOCK"
                      v-if="item3.result !== 1 && (item3.closed || item3.stop === 2 || item3.pause === 2 || item3.frozen === 2)"
                    ></image>
                    <!-- 正确选项 -->
                    <image class="winImage" :src="IMAGES.VIDEO_WIN" v-if="item3.result === 1"></image>
                    <text class="supported" v-if="oddIds.includes(item3.odd_id)">已支持</text>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <cheer-modal
      :show.sync="isShowModal"
      :cheerTitle="'在 ' + odds[current].title + ' 中您认为[ ' + odds[current].items[current2].title + ' ]的是'"
      :cheerDesc="odds[current].items[current2].items[current3].name"
      :odd="selectOdd"
      v-if="odds && odds[current] && selectOdd"
      @event-submit="onSubmitCheer"
    ></cheer-modal>
  </view>
</template>
<script>
import { IMAGES } from "@/config/resources";
import navBack from "@/components/navBack";
// 积分
import score from "./components/score";
// 人气
import popularity from "./components/popularity";
import uniApp from "@/utils/uni-app";
import cheerModal from "@/components/cheer/modal";
let id, timer, supportTimer;
export default {
  components: {
    navBack,
    score,
    popularity,
    cheerModal
  },
  data() {
    return {
      navTitle: "更多玩法",
      support: null,
      match: {},
      odds: [],
      oddIds: [],
      selectOdd: {},
      scrollLeft: 0,
      current: 0,
      current2: 0,
      current3: 0,
      isShowModal: false
    };
  },
  computed: {
    IMAGES: () => IMAGES
  },
  onLoad(options) {
    id = options.id;
    if (!id) {
      uni.navigateTo({
        url: "/pages/common/home/index"
      });
    }
    this.init().then(_ => {
      if (options.type && options.type === "more") {
        this.navTitle = "更多玩法";
      } else {
        this.navTitle = _.data.data.match.matchName;
      }
    });
    this.getMatchSupportDetail();
  },
  onShow() {
    timer = setInterval(() => {
      this.init();
    }, 5000);
    // 定时获取积分和人气
    supportTimer = setInterval(() => {
      this.getMatchSupportDetail();
    }, 5000);
  },
  onHide() {
    clearInterval(timer);
    clearInterval(supportTimer);
  },
  methods: {
    getMatchSupportDetail() {
      return this.$api.video.getMatchSupportDetail(id).then(_ => {
        this.support = _.data.data;
        return _.data.data;
      });
    },
    calcScore(item, index) {
      return item.support[`team` + ["A", "B"][index] + `Support`] / 10000;
    },
    init() {
      return this.$api.video.getMatchDetail(id).then(response => {
        this.match = response.data.data.match;
        this.odds = response.data.data.odds;
        this.oddIds = response.data.data.oddIds || [];
        return response;
      });
    },
    tabSelect({ currentTarget }) {
      this.current = currentTarget.dataset.index;
      this.scrollLeft = (currentTarget.dataset.index - 1) * 60;
    },
    onChangeSwiper({ detail }) {
      this.current = detail.current;
    },
    onTapCheer(index2, index3) {
      this.current2 = index2;
      this.current3 = index3;
      this.selectOdd = this.odds[this.current].items[this.current2].items[this.current3];
      this.isShowModal = true;
    },
    onSubmitCheer(e) {
      this.$api.video
        .postCheer({
          oddId: e.oddId,
          flower: e.flowerTotal,
          useDebt: e.isUseWhiteStrip ? 1 : 0
        })
        .then(response => {
          uniApp.toast("助威成功");
        })
        .catch(e => {
          uniApp.alert(e.data.msg || "助威失败");
        });
    }
  },
  onUnload() {
    clearInterval(timer);
    clearInterval(supportTimer);
  },
  onPullDownRefresh() {
    this.init().then(_ => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>

<style lang="scss" scoped>
.moreGameType {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
}
.navTitle {
  text-align: center;
  margin-left: -100rpx;
}
.navTitleText {
  color: #ffffff;
}
.container {
  height: calc(100% - 90rpx);
  overflow: hidden;
}
// 比赛信息
.matchInfo {
  background-color: #f3f3f3;
  padding: 10rpx 30rpx;
  margin: 10rpx;
  border-radius: 8upx;
}
.gameLogo {
  width: 30rpx;
  height: 30rpx;
  border-radius: 30rpx;
  background-color: #eeeeee;
  overflow: hidden;
  margin-right: 5rpx;
}
.gameLogoImage {
  width: 30rpx;
  height: 30rpx;
}
.matchName {
  color: #000000;
  font-size: 26rpx;
}
.matchDateText {
  font-weight: lighter;
  color: #444444;
}
.body {
  margin: 20rpx 0;
}
.teamLogo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 80rpx;
  overflow: hidden;
  background-color: #ffffff;
}
.teamLogoImage {
  width: 80rpx;
  height: 80rpx;
}
.teamInfo {
  background-color: #aaaaaa;
  border-radius: 2500rpx;
  color: #ffffff;
  height: 80rpx;
  padding: 0 20rpx;
}
.matchTime {
  padding: 0 10rpx;
  font-size: 38rpx;
  font-weight: bold;
}
// 场次
.nav {
  .cu-item {
    height: 60rpx;
    line-height: 60rpx;
  }
  height: 60rpx;
  line-height: 60rpx;
}

.swiper {
  width: 100%;
  height: calc(100% - 300rpx - 60rpx);
  swiper-item {
    background-color: #f3f3f3;
    width: 100%;
    height: 100%;
  }
}
.scrollView {
  height: 100%;
}
// 投注面板
.lockImage {
  z-index: 1;
  position: absolute;
  right: 30rpx;
  top: 10rpx;
  width: 40rpx;
  height: 40rpx;
}
// 开出的正确结果
.winImage {
  position: absolute;
  z-index: 2;
  right: 20rpx;
  top: -20rpx;
  width: 70rpx;
  height: 70rpx;
}
// 已支持
.supported {
  position: absolute;
  top: 30rpx;
  left: -50rpx;
  text-align: center;
  background-color: #fb7299;
  color: #ffffff;
  width: 200rpx;
  transform: rotate(-45deg);
  font-size: 20rpx;
}

.type-card {
  margin: 5upx auto;
  padding: 10upx 40upx;
  background-color: #ffffff;
  &-title {
    font-size: 24upx;
    padding-left: 20upx;
    border-left: 5upx solid #666666;
  }
  &-body {
    padding: 20upx 0;
    .grid {
      &-item {
        position: relative;
        overflow: hidden;
        // 封停
        &.stop {
          filter: grayscale(1);
          .btn {
            background-color: #f3f3f3;
          }
        }
        .btn {
          width: 90%;
          margin: 0 auto;
          background-color: #e0e1f6;
          color: #272f42;
          text-align: center;
          padding: 20upx 20upx;
          border-radius: 8upx;
          cursor: pointer;
          .name {
            font-size: 28upx;
            line-height: 30upx;
          }
          .tip {
            font-size: 20upx;
          }
        }
      }
    }
  }
}
</style>
